<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册 - 查聊</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4F46E5', // 主色调：紫色
            secondary: '#10B981', // 辅助色：绿色
            accent: '#F59E0B', // 强调色：橙色
            light: '#F3F4F6', // 浅色背景
            dark: '#1F2937', // 深色文本
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .bg-gradient-custom {
        background-image: linear-gradient(135deg, #10B981 0%, #059669 100%);
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .input-focus {
        @apply focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all;
      }
    }
  </style>
  
  <style>
    /* 基础样式 */
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
    
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
    
    /* 动画效果 */
    .animate-float {
      animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-20px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    
    /* 渐变背景动画 */
    .bg-gradient-animated {
      background-size: 200% 200%;
      animation: gradientAnimation 15s ease infinite;
    }
    
    @keyframes gradientAnimation {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
  </style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen">
  <!-- 主容器 -->
  <div class="flex flex-col md:flex-row min-h-screen">
    <!-- 左侧欢迎区域 (PC端显示) -->
    <div class="hidden md:flex flex-col justify-center items-center bg-gradient-custom bg-gradient-animated text-white p-12 w-full md:w-1/2">
      <div class="max-w-lg w-full">
        <!-- Logo -->
        <div class="flex items-center space-x-2 mb-12">
          <span class="text-white text-3xl"><i class="fa fa-comments-o"></i></span>
          <span class="text-2xl font-bold text-white text-shadow">查聊</span>
        </div>
        
        <!-- 欢迎文字 -->
        <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-6 text-shadow">
          加入查聊<br>开启交流之旅
        </h1>
        <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-10 max-w-md">
          与志同道合的朋友分享知识、讨论问题、交流经验，一起成长进步
        </p>
        
        <!-- 装饰图标 -->
        <div class="flex justify-center mt-8">
          <div class="grid grid-cols-2 gap-6 animate-float">
            <div class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl">
              <i class="fa fa-share-alt"></i>
            </div>
            <div class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl">
              <i class="fa fa-graduation-cap"></i>
            </div>
            <div class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl">
              <i class="fa fa-heart"></i>
            </div>
            <div class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl">
              <i class="fa fa-rocket"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧注册表单区域 -->
    <div class="flex-1 flex flex-col justify-center items-center p-6">
      <!-- 移动端Logo -->
      <div class="md:hidden flex items-center space-x-2 mb-10">
        <span class="text-primary text-2xl"><i class="fa fa-comments-o"></i></span>
        <span class="text-xl font-bold text-primary">查聊</span>
      </div>
      
      <!-- 注册表单容器 -->
      <div class="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
        <!-- 表单标题 -->
        <div class="mb-8 text-center">
          <h2 class="text-2xl font-bold text-gray-900 mb-2">创建账号</h2>
          <p class="text-gray-500">加入查聊社区，与更多朋友交流分享</p>
        </div>
        
        <!-- 注册表单 -->
        <form id="register-form" class="space-y-6">
          <!-- 用户名输入框 -->
          <div>
            <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">
                <i class="fa fa-user-o"></i>
              </span>
              <input type="text" id="username" name="username" placeholder="请设置用户名" 
                     class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg outline-none input-focus">
              <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 text-sm" id="username-count">
                0/20
              </span>
            </div>
          </div>
          
          <!-- 邮箱输入框 -->
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">
                <i class="fa fa-envelope-o"></i>
              </span>
              <input type="email" id="email" name="email" placeholder="请输入邮箱地址" 
                     class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg outline-none input-focus">
            </div>
          </div>
          
          <!-- 密码输入框 -->
          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">
                <i class="fa fa-lock"></i>
              </span>
              <input type="password" id="password" name="password" placeholder="请设置密码" 
                     class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg outline-none input-focus">
              <button type="button" id="toggle-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700">
                <i class="fa fa-eye-slash"></i>
              </button>
            </div>
            <div class="mt-2 space-y-1" id="password-strength">
              <div class="flex items-center text-xs text-gray-500">
                <i class="fa fa-info-circle mr-1"></i>
                <span>密码至少包含8个字符，包括字母、数字和特殊符号</span>
              </div>
              <div class="w-full h-1 bg-gray-200 rounded-full overflow-hidden">
                <div class="h-full bg-gray-300 w-0 transition-all duration-300"></div>
              </div>
            </div>
          </div>
          
          <!-- 确认密码输入框 -->
          <div>
            <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">
                <i class="fa fa-lock"></i>
              </span>
              <input type="password" id="confirm-password" name="confirm-password" placeholder="请再次输入密码" 
                     class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg outline-none input-focus">
              <button type="button" id="toggle-confirm-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700">
                <i class="fa fa-eye-slash"></i>
              </button>
            </div>
            <p class="mt-1 text-xs text-red-500 hidden" id="password-match-error">
              两次输入的密码不一致
            </p>
          </div>
          
          <!-- 验证码输入框 -->
          <div>
            <label for="verification-code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
            <div class="flex space-x-3">
              <div class="relative flex-1">
                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">
                  <i class="fa fa-shield"></i>
                </span>
                <input type="text" id="verification-code" name="verification-code" placeholder="请输入验证码" 
                       class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg outline-none input-focus">
              </div>
              <button type="button" id="send-code-btn" class="px-4 py-3 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition-colors whitespace-nowrap">
                获取验证码
              </button>
            </div>
          </div>
          
          <!-- 用户协议 -->
          <div class="flex items-start">
            <input type="checkbox" id="agree-terms" name="agree-terms" 
                   class="w-4 h-4 mt-1 text-primary border-gray-300 rounded focus:ring-primary/30">
            <label for="agree-terms" class="ml-2 text-sm text-gray-600">
              我已阅读并同意 <a href="#" class="text-primary hover:text-primary/80 transition-colors">服务条款</a> 和 <a href="#" class="text-primary hover:text-primary/80 transition-colors">隐私政策</a>
            </label>
          </div>
          
          <!-- 注册按钮 -->
          <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-colors">
            注册
          </button>
        </form>
        
        <!-- 登录账号链接 -->
        <div class="mt-8 text-center">
          <p class="text-gray-600">
            已有账号？ <a href="login.html" class="font-medium text-primary hover:text-primary/80 transition-colors">立即登录</a>
          </p>
        </div>
      </div>
      
      <!-- 底部版权信息 -->
      <div class="mt-10 text-center text-gray-500 text-sm">
        <p>© 2023 查聊. 保留所有权利.</p>
        <div class="mt-2 space-x-4">
          <a href="#" class="hover:text-gray-700 transition-colors">服务条款</a>
          <a href="#" class="hover:text-gray-700 transition-colors">隐私政策</a>
          <a href="#" class="hover:text-gray-700 transition-colors">帮助中心</a>
        </div>
      </div>
    </div>
  </div>

  <!-- 成功提示弹窗 (默认隐藏) -->
  <div id="success-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl p-6 max-w-sm w-full mx-4 text-center">
      <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
        <i class="fa fa-check text-2xl text-green-500"></i>
      </div>
      <h3 class="text-lg font-bold text-gray-900 mb-2">注册成功</h3>
      <p class="text-gray-600 mb-6">恭喜你，账号已成功创建！现在可以登录查聊社区了</p>
      <button id="go-login-btn" class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
        前往登录
      </button>
    </div>
  </div>

  <!-- 错误提示弹窗 (默认隐藏) -->
  <div id="error-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl p-6 max-w-sm w-full mx-4">
      <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
        <i class="fa fa-times text-2xl text-red-500"></i>
      </div>
      <h3 class="text-lg font-bold text-gray-900 mb-2 text-center">注册失败</h3>
      <p id="error-message" class="text-gray-600 mb-6 text-center">请检查您的信息是否正确</p>
      <button id="close-error-btn" class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
        重试
      </button>
    </div>
  </div>

  <!-- JavaScript -->
  <script>
    // 用户名字数统计
    const usernameInput = document.getElementById('username');
    const usernameCount = document.getElementById('username-count');
    
    if (usernameInput && usernameCount) {
      usernameInput.addEventListener('input', function() {
        const length = this.value.length;
        usernameCount.textContent = `${length}/20`;
        
        // 超出字数限制时显示警告颜色
        if (length > 20) {
          usernameCount.classList.add('text-red-500');
        } else {
          usernameCount.classList.remove('text-red-500');
        }
      });
    }
    
    // 切换密码可见性
    const togglePassword = document.getElementById('toggle-password');
    const passwordInput = document.getElementById('password');
    const toggleConfirmPassword = document.getElementById('toggle-confirm-password');
    const confirmPasswordInput = document.getElementById('confirm-password');
    const passwordMatchError = document.getElementById('password-match-error');
    
    if (togglePassword && passwordInput) {
      togglePassword.addEventListener('click', function() {
        togglePasswordVisibility(passwordInput, this);
      });
    }
    
    if (toggleConfirmPassword && confirmPasswordInput) {
      toggleConfirmPassword.addEventListener('click', function() {
        togglePasswordVisibility(confirmPasswordInput, this);
      });
    }
    
    function togglePasswordVisibility(input, button) {
      const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
      input.setAttribute('type', type);
      
      // 切换图标
      button.querySelector('i').classList.toggle('fa-eye-slash');
      button.querySelector('i').classList.toggle('fa-eye');
    }
    
    // 密码强度检测
    const passwordStrength = document.getElementById('password-strength');
    const strengthBar = passwordStrength ? passwordStrength.querySelector('.bg-gray-300') : null;
    
    if (passwordInput && strengthBar) {
      passwordInput.addEventListener('input', function() {
        const password = this.value;
        let strength = 0;
        
        // 密码长度检测
        if (password.length >= 8) strength += 25;
        
        // 包含小写字母
        if (/[a-z]/.test(password)) strength += 25;
        
        // 包含大写字母
        if (/[A-Z]/.test(password)) strength += 25;
        
        // 包含数字
        if (/[0-9]/.test(password)) strength += 12.5;
        
        // 包含特殊字符
        if (/[^A-Za-z0-9]/.test(password)) strength += 12.5;
        
        // 更新强度条
        strengthBar.style.width = `${strength}%`;
        
        // 根据强度更改颜色
        if (strength < 50) {
          strengthBar.className = 'h-full bg-red-400 transition-all duration-300';
        } else if (strength < 75) {
          strengthBar.className = 'h-full bg-yellow-400 transition-all duration-300';
        } else {
          strengthBar.className = 'h-full bg-green-400 transition-all duration-300';
        }
      });
    }
    
    // 密码匹配检查
    if (confirmPasswordInput && passwordInput && passwordMatchError) {
      confirmPasswordInput.addEventListener('input', function() {
        if (this.value && this.value !== passwordInput.value) {
          passwordMatchError.classList.remove('hidden');
        } else {
          passwordMatchError.classList.add('hidden');
        }
      });
    }
    
    // 发送验证码倒计时
    const sendCodeBtn = document.getElementById('send-code-btn');
    
    if (sendCodeBtn) {
      sendCodeBtn.addEventListener('click', function() {
        const email = document.getElementById('email').value;
        
        // 简单的邮箱验证
        if (!email || !isValidEmail(email)) {
          showError('请输入有效的邮箱地址');
          return;
        }
        
        // 开始倒计时
        let countdown = 60;
        this.disabled = true;
        this.classList.add('bg-gray-200', 'cursor-not-allowed');
        this.classList.remove('hover:bg-gray-200');
        this.textContent = `${countdown}秒后重试`;
        
        const timer = setInterval(() => {
          countdown--;
          this.textContent = `${countdown}秒后重试`;
          
          if (countdown <= 0) {
            clearInterval(timer);
            this.disabled = false;
            this.classList.remove('bg-gray-200', 'cursor-not-allowed');
            this.classList.add('hover:bg-gray-200');
            this.textContent = '获取验证码';
          }
        }, 1000);
        
        // 模拟发送验证码
        console.log('发送验证码到邮箱:', email);
      });
    }
    
    function isValidEmail(email) {
      const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }
    
    // 表单提交处理
    const registerForm = document.getElementById('register-form');
    const successModal = document.getElementById('success-modal');
    const errorModal = document.getElementById('error-modal');
    const errorMessage = document.getElementById('error-message');
    const closeErrorBtn = document.getElementById('close-error-btn');
    const goLoginBtn = document.getElementById('go-login-btn');
    
    if (registerForm) {
      registerForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取表单数据
        const username = document.getElementById('username').value;
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirm-password').value;
        const verificationCode = document.getElementById('verification-code').value;
        const agreeTerms = document.getElementById('agree-terms').checked;
        
        // 表单验证
        if (!username) {
          showError('请输入用户名');
          return;
        }
        
        if (username.length > 20) {
          showError('用户名不能超过20个字符');
          return;
        }
        
        if (!email || !isValidEmail(email)) {
          showError('请输入有效的邮箱地址');
          return;
        }
        
        if (!password || password.length < 8) {
          showError('密码至少需要8个字符');
          return;
        }
        
        if (password !== confirmPassword) {
          showError('两次输入的密码不一致');
          return;
        }
        
        if (!verificationCode) {
          showError('请输入验证码');
          return;
        }
        
        if (!agreeTerms) {
          showError('请阅读并同意服务条款和隐私政策');
          return;
        }
        
        // 这里可以添加实际的注册逻辑
        // 模拟注册请求
        setTimeout(function() {
          // 模拟成功注册，显示成功弹窗
          successModal.classList.remove('hidden');
          
          // 如果需要模拟注册失败，可以取消上面的注释并取消下面的注释
          // showError('注册失败，请稍后重试');
        }, 1500);
      });
    }
    
    function showError(message) {
      if (errorMessage) {
        errorMessage.textContent = message;
      }
      if (errorModal) {
        errorModal.classList.remove('hidden');
      }
    }
    
    if (closeErrorBtn) {
      closeErrorBtn.addEventListener('click', function() {
        if (errorModal) {
          errorModal.classList.add('hidden');
        }
      });
    }
    
    if (goLoginBtn) {
      goLoginBtn.addEventListener('click', function() {
        window.location.href = 'login.html';
      });
    }
    
    // 协议链接点击事件
    const termsLinks = document.querySelectorAll('a[href="#"]');
    termsLinks.forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        alert('服务条款和隐私政策页面即将上线');
      });
    });
  </script>
</body>
</html>